<template>
    <div>
        <el-dialog title="注册" :visible.sync="isShowInsert" class="el_dialog" @close='cancleBtnClick' >
            <div class="containerDiv">
                <div class="rowDiv" style="margin-top:-10px;">
                    <div class="spandiv"><span>姓名</span></div>
                    <el-input v-model="name" type="text" class="el_ipt" placeholder="请输入姓名"  auto-complete="new-password"></el-input>
                </div>
                <div class="rowDiv">
                    <div class="spandiv"><span>性别</span></div>
                    <el-select class="sexSelect" v-model="sex" placeholder="请选择性别">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                </div>
                <div class="rowDiv">
                    <div class="spandiv"><span>注册日期</span></div>
                    <el-input v-model="currentDate" disabled class="el_ipt" auto-complete="new-password"></el-input>
                </div>
                <div class="rowDiv">
                    <div class="spandiv"><span>账户名</span></div>
                    <el-input v-model="username" class="el_ipt" auto-complete="new-password" placeholder="请输入账户名"></el-input>
                </div>
                <div class="rowDiv">
                    <div class="spandiv"><span>密码</span></div>
                    <el-input v-model="password" class="el_ipt" auto-complete="new-password" placeholder="请输入密码"></el-input>
                </div>
                <div class="rowDiv">
                    <el-button type="warning" class="el_btn_cancle" @click="cancleBtnClick">取消</el-button>
                    <el-button type="primary" class="el_btn_save" @click="insertUserInfo">保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data () {
        return {
            name : '',
            sex : '',
            currentDate: '',
            username: '',
            password: '',
        }
    },
    computed : mapState({
        isShowInsert: (state) => state.isShowInsert
    }),
    watch : {
        isShowInsert () {
            this.clearVal();
            this.$store.commit({
                type: 'syncShow',
                bool: this.isShowInsert
            })
        }
    },
    methods : {
        cancleBtnClick() {
            this.$store.commit({
                type: 'syncShow',
                bool: false
            })
        },
        getNewTime() {
            var that = this
            setInterval(function (){
                var dt = that.getformatDate();
                that.currentDate = dt;
            },1000);
        },
        getformatDate() {
            // 获取单元格数据
            let dt = new Date();
            var Y = dt.getFullYear() + '-';
            var M = (dt.getMonth()+1 < 10 ? '0'+(dt.getMonth()+1) : dt.getMonth()+1) + '-';
            var D = dt.getDate() + ' ';
            var h = (dt.getHours() < 10 ? '0'+(dt.getHours()) : dt.getHours()) + ':' ;
            var m = (dt.getMinutes() < 10 ? '0'+(dt.getMinutes()) : dt.getMinutes()) + ':' ;
            var s = (dt.getSeconds() < 10 ? '0'+(dt.getSeconds()) : dt.getSeconds());
            return Y+M+D+h+m+s;
        },
        clearVal() {
            this.name = '',
            this.sex = '',
            this.currentDate= '',
            this.username= '',
            this.password= ''
        },
        insertUserInfo() {
            // 插入一条用户信息
            var that = this;
            if (this.name == '') {
                this.$message({
                message: '姓名不能为空',
                type: 'warning'
                });
                return;
            }
            if (this.sex == '') {
                this.$message({
                message: '性别不能为空',
                type: 'warning'
                });
                return;
            }
            if (this.username == '') {
                this.$message({
                message: '用户名不能为空',
                type: 'warning'
                });
                return;
            }
            if (this.password == '') {
                this.$message({
                message: '密码不能为空',
                type: 'warning'
                });
                return;
            }
            this.$http.post('/api/user/insertUser', {
                name: that.name,
                sex: that.sex,
                registerDate: that.currentDate,
                username: that.username,
                password: that.password
            }).then((res) => {
                console.log('插入结果返回', res);      
                if(res.body.affectedRows === 1) {
                    this.$message({
                        message: '注册成功！',
                        type: 'success'
                    });
                    that.$store.commit({
                        type: 'syncShow',
                        num: false
                    })
                } else {
                    this.$message.error('插入失败，请检查！');
                }
            })
        }
    },
    mounted() {
        this.getNewTime();
    }
}
</script>

<style scoped>
.spandiv {
    width: 100px;
    display: inline-block;
}
.el_ipt {
    display: inline-block;
    width: 200px;
}
.sexSelect {
    width: 200px;
}
.rowDiv {
    margin-top: 10px;
}
.el_dialog {
    text-align: center;
}
.el_btn_cancle {
    width: 80px;
    margin-left: 30px;
}
.el_btn_save {
    width: 80px;
    margin-left: 60px;
}
</style>